import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import Dialog from '@/components/dialog/Index'
import type { AnyObject } from '@/types'
import { getOnekeyDetail, handleOnekey } from '@/api/insurance/period'
import type { OperateRecordDetailDto } from '@/api/insurance/period/types'
import { Button, message, Tag } from 'ant-design-vue'
import { confirm } from '@/utils/util'

@Component
export class DialogAutoRenewalDetail extends TableRender {
    @Prop() show!: boolean
    @Prop() companyId!: number
    @Prop() onekeyEnsureType!: number

    showDialog = false
    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show')
    handleWatchShow(val: boolean) {
        this.showDialog = val
        if (this.show) {
            this.reloadPage(1)
        }
    }

    @Watch('showDialog')
    handleWatchShowDialog(val: boolean) {
        this.updateShow(val)
    }

    tableColumnConfigOld = () => [
        {
            field: 'serveCompanyName',
            title: '派遣单位',
            width: 200
        },
        {
            field: 'userName',
            title: '被保人'
        },
        {
            field: 'idCardNo',
            title: '身份证号',
            width: 180
        },
        {
            field: 'occupationName',
            title: '工种名称'
        },
        {
            field: 'occupationLevel',
            title: '工种等级'
        },
        {
            field: 'code',
            title: '工种编码'
        },
        {
            field: 'insurStartTime',
            title: '在保开始时间',
            width: 160
        },
        {
            field: 'insurEndTime',
            title: '在保结束时间',
            width: 160
        }
    ] as TableRenderColumnTypes<OperateRecordDetailDto>

    async onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.companyId) return []
        const res = await getOnekeyDetail({
            companyId: this.companyId,
            onekeyEnsureType: this.onekeyEnsureType,
            ...filters
        })
        return res.terminalEnsureStaffList
    }

    async onRenewal() {
        await confirm('确认一键续保吗？', '提示')
        const res = await handleOnekey({
            companyId: this.companyId,
            onekeyEnsureType: this.onekeyEnsureType
        })
        res.isEnoughBalance
            ? message.success('一键续保成功')
            : message.error('账户余额不充足，续保失败')
        this.showDialog = false
        this.handleRefresh()
    }

    renderRightBtns() {
        return (
            <div class="flex justify-between w-full">
                <div>
                    <Tag color="error">
                    一键续保当前公司各方案的系统自动减保人员，不包含后续操作过投保的人员
                    </Tag>
                </div>
                <Button type="primary" onClick={this.onRenewal}>
                    一键续保
                </Button>
            </div>
        )
    }

    render() {
        return (
            <Dialog
                v-model:show={this.showDialog}
                title="一键续保"
                width="800px"
                v-slots={{
                    default: () => {
                        return (
                            <div>
                                {this.renderRightBtns()}
                                {super.renderTable()}
                            </div>
                        )
                    }
                }}
            ></Dialog>
        )
    }
}

export default toNative<{ companyId: number; onekeyEnsureType: number }, { refresh: () => void }>(
    DialogAutoRenewalDetail
)
